<template>
	<view class="content">
		<view class="top">
			<view class="top-left">
				<input type="text" @input="go1" v-model="searchInfo" placeholder="搜索用户名/用户邮箱/群名称" placeholder-class="tip" />
				<image src="../../static/index/search.png" @tap="go"></image>
			</view>
			<view class="top-right" @tap="back">
				取消
			</view>
		</view>
		<view class="msg">
			<view class="user">
				<view class="title" v-if="userinfo!=''">用户</view>
				<view class="list" @tap="toUserHome(item._id)" v-for="(item,key) in userinfo" :key="item._id">
					<view class="left">
						<image :src="item.imgurl"></image>
					</view>
					<view class="name">
						<view class="name1" v-html="item.name"></view>
						<view class="email" v-html="item.email"></view>
					</view>
					<view class="send" v-if="isFriend[key]&&!isme[key]" @tap.stop="sendmsg">发消息</view>
					<view class="add" v-if="!isFriend[key]&&!isme[key]" @tap.stop="showChange(item._id)">加好友</view>
				</view>
			</view>
			<view class="group">
				<view class="title" v-if="groupinfo!=''">群组</view>
				<view class="list" v-for="(item,key) in groupinfo" :key="item._id">
					<view class="left">
						<image :src="item.imgurl"></image>
					</view>
					<view class="name" v-html="item.name"></view>
					<view class="send" v-if="isInGroup[key]" @tap.stop="sendmsg">发消息</view>
				</view>
			</view>
		</view>
		<view class="changePage" :animation='animationData' :style="{bottom:-height+'px'}">
			<view class="changeTop">
				<view class="left" @tap="showChange">取消</view>
				<view class="center">添加好友</view>
				<view class="right" @tap="over">发送</view>
			</view>
			<textarea class="changeInfo" placeholder="请输入发送消息" v-model="temp"></textarea>
		</view>
	</view>
</template>

<script>
	//引用节流函数
	import myfun from '../../common/myFunc.js'
	export default {
		data() {
			return {
				fid: '',
				temp: '',
				isShow: false,
				isme: [],
				isFriend: [],
				isInGroup: [],
				searchInfo: '',
				userinfo: [],
				groupinfo: [],
				isempty: true,
				animationData: '',
				height: '', //获取屏幕高度
			};
		},
		onLoad() {
			const res = uni.getSystemInfoSync()
			this.height = res.windowHeight
		},
		methods: {
			showChange(e) {
				this.fid = e
				this.temp = ''
				this.isShow = !this.isShow
				var animation = uni.createAnimation({
					duration: 400,
					timingFunction: 'ease',
				})
				if (this.isShow) {
					animation.bottom(0).step()
				} else {
					this.fid = ''
					animation.bottom(-this.height).step()
				}
				this.animationData = animation.export()
			},
			over() {
				this.isShow = !this.isShow
				uni.request({
					url: this.url + '/friend/addFriend',
					method: 'POST',
					data: {
							uid: uni.getStorageSync('user').id,
							fid: this.fid,
							msg: this.temp
					},
					fail: (err) => {
						console.log(err)
					},
					success: (res) => {
						console.log(res)
						uni.showToast({
							title: '发送成功，请等待对方同意！',
							icon: 'none'
						})
						this.fid = ''
					}
				})
				var animation = uni.createAnimation({
					duration: 400,
					timingFunction: 'ease',
				})
				animation.bottom(-this.height).step()
				this.animationData = animation.export()
			},
			//判断是否为好友
			friend(e) {
				uni.request({
					url: this.url + '/search/isFriend',
					data: {
						uid: uni.getStorageSync('user').id,
						fid: e
					},
					method: 'POST',
					success: (res) => {
						if (res.data.status == 200) {
							this.isFriend.push(true)
						} else {
							var result = true
							this.isFriend.push(false)
						}
					}
				})
			},
			//判断是否在群内
			group(e) {
				uni.request({
					url: this.url + '/search/isInGroup',
					data: {
						uid: uni.getStorageSync('user').id,
						gid: e
					},
					method: 'POST',
					success: (res) => {
						if (res.data.status == 200) {
							this.isInGroup.push(true)
						} else {
							var result = true
							this.isInGroup.push(false)
						}
					}
				})
			},
			// 调用节流函数
			go1: myfun.debounce(function(e) {
				this.go()
			}, 800),
			go() {
				this.isme = []
				this.isFriend = []
				this.isInGroup = []
				if (this.searchInfo == '') {
					uni.showToast({
						title: '搜索内容不能为空',
						icon: 'none'
					})
				} else {
					// 请求用户列表
					uni.request({
						url: this.url + '/search/user',
						data: {
							data: this.searchInfo,
							token: uni.getStorageSync('token_key')
						},
						method: 'POST',
						success: (res) => {
							if (res.data.token_status == undefined) {
								console.log('用户列表', res.data.result)
								var arr = res.data.result
								var len = arr.length
								this.userinfo = []
								for (var i = 0; i < len; i++) {
									if (arr[i]._id == uni.getStorageSync('user').id) {
										this.isme.push(true)
									} else {
										this.isme.push(false)
									}
									this.friend(arr[i]._id) //判断是否为好友
									if (arr[i].name.search(this.searchInfo) != -1) {
										arr[i].name = arr[i].name.replace(eval("/" + this.searchInfo + "/g"),
											"<span style='color:#4AAAFF'>" + this.searchInfo + "</span>")
									}
									if (arr[i].email.search(this.searchInfo) != -1) {
										arr[i].email = arr[i].email.replace(eval("/" + this.searchInfo + "/g"),
											"<span style='color:#4AAAFF'>" + this.searchInfo + "</span>")
									}
									arr[i].imgurl = this.url + '/user/' + arr[i].imgurl
									this.userinfo.push(arr[i])
								}
							} else {
								uni.showToast({
									title: '你无权进行操作，请重新登录',
									icon: 'none',
									duration: 500
								})
								setTimeout(function() {
									uni.navigateTo({
										url: '../login/login',
										animationType: 'pop-in'
									})
								}, 500)
							}
						}
					})
					//获取群列表
					uni.request({
						url: this.url + '/search/group',
						data: {
							data: this.searchInfo,
							// token: uni.getStorageSync('token_key')
						},
						method: 'POST',
						success: (res) => {
							if (res.data.token_status == undefined) {
								console.log('群列表', res.data.result)
								var arr = res.data.result
								var len = arr.length
								this.groupinfo = []
								for (var i = 0; i < len; i++) {
									this.group(arr[i]._id) //判断是否在群内
									if (arr[i].name.search(this.searchInfo) != -1) {
										arr[i].name = arr[i].name.replace(eval("/" + this.searchInfo + "/g"),
											"<span style='color:#4AAAFF'>" + this.searchInfo + "</span>")
									}
									this.groupinfo.push(arr[i])
								}
							} else {
								uni.showToast({
									title: '你无权进行操作，请重新登录',
									icon: 'none',
									duration: 500
								})
								setTimeout(function() {
									uni.navigateTo({
										url: '../login/login',
										animationType: 'pop-in'
									})
								}, 500)
							}
						}
					})
				}
			},
			back() {
				uni.navigateBack({
					animationType: "pop-out"
				})
			},
			toUserHome(e) {
				uni.navigateTo({
					url: '../userHome/userHome?id=' + e,
					animationType: 'pop-in'
				})
			},
			sendmsg() {
				alert("123")
			}
		}
	}
</script>

<style lang="scss">
	@import "../../common/top.scss";

	.top {
		.top-left {
			margin-left: $uni-spacing-col-base;
			height: 88rpx;
			display: flex;
			align-items: center;
			position: relative;

			input {
				width: 600rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: $uni-bg-color-grey;
				border-radius: 10rpx;
				padding-left: 20rpx;
				font-size: 30rpx
			}

			image {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 548rpx;
			}
		}

		.top-right {
			font-size: 28rpx;
			height: 88rpx;
			line-height: 88rpx;
			margin-right: 32rpx;
		}
	}

	.msg {
		padding: 0 32rpx;
		margin-top: 88rpx;

		.title {
			margin-top: 34rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 44rpx;
			font-weight: 700;
		}

		.list {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 120rpx;

			.left {
				height: 120rpx;
				display: flex;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 15rpx;
				}
			}

			.name {
				height: 120rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 32rpx;

				.name1 {
					height: 60rpx;
					font-size: 40rpx;
					line-height: 60rpx;
				}

				.email {
					height: 16rpx;
					font-size: 16rpx;
					line-height: 16rpx;
				}
			}

			.send {
				height: 48rpx;
				width: 120rpx;
				font-size: 24rpx;
				line-height: 48rpx;
				text-align: center;
				background: $uni-color-primary;
				border-radius: 24px;
				position: absolute;
				right: 0rpx;
			}

			.add {
				height: 48rpx;
				width: 120rpx;
				font-size: 24rpx;
				line-height: 48rpx;
				text-align: center;
				background: rgba(74, 170, 255, 0.10);
				border-radius: 24px;
				position: absolute;
				right: 0rpx;
				color: #4AAAFF;
			}
		}
	}

	.changePage {
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 11;
		background-color: white;

		.changeTop {
			padding-top: var(--status-bar-height);
			height: 88rpx;
			width: 100%;
			top: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background: rgba(255, 255, 255, 1);
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			font-size: 40rpx;
			font-weight: 600;

			.left,
			.right {
				margin: 0 $uni-spacing-col-base;
				font-size: 32rpx;
				font-weight: 400;
			}

			.right {
				color: #4AAAFF;
			}
		}

		.changeInfo {
			width: 642rpx;
			height: 370rpx;
			border-radius: 20rpx;
			background: #F3F4F6;
			margin: 34rpx 32rpx;
			padding: 16rpx 22rpx;
			color: #272832;
			font-size: 32rpx;
		}
	}
</style>
